<link rel="stylesheet" href="catalog/view/javascript/swiper-11/swiper-bundle.min.css" />
<style>
    .reviews-container {background: #fff;padding: 20px 0 58px 0;}
    .review-group {display: flex;gap: 15px;}
    .review-item {flex: 1;background: #f9f9f9;border-radius: 10px;padding: 12px;display: flex;gap: 10px;align-items: flex-start;min-height: 150px;}
    .review-avatar {width: 60px;height: 60px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
    .review-content {flex: 1;}
    .review-stars {color: #FFD700;font-size: 14px;margin-bottom: 4px;}
    .review-text {font-size: 14px;color: #333;margin-bottom: 6px;}
    .review-meta {font-size: 12px;color: #999;}
    @media (max-width: 768px) {.review-group{flex-direction: column;}.review-item {min-height: auto;}}
</style>

<div class="col-sm-12 hidden-xs" style="text-align: center;">
    <h4>{{ module['content']['title'] }}</h4>
    <div class="strip-line"></div>
</div>

<div class="reviews-container">
    <div class="swiper review-swiper">
        <div class="swiper-wrapper">
            {% for i in 0..(( module['content']['articles']|length // 3) + ( module['content']['articles']|length % 3 > 0 ? 1 : 0) - 1) %}
                <div class="swiper-slide">
                    <div class="review-group">
                        {% for j in 0..2 %}
                            {% set index = i * 3 + j %}
                            {% if  module['content']['articles'][index] is defined %}
                                {% set review =  module['content']['articles'][index] %}
                                <div class="review-item">
                                    <img class="review-avatar" src="{{ review.thumb }}" alt="{{ review.name }}">
                                    <div class="review-content">
                                        <div class="review-stars">
                                            {% for k in 1..5 %}
                                                {% if k <= review.stars %}★{% else %}☆{% endif %}
                                            {% endfor %}
                                        </div>
                                        <div class="review-text">{{ review.description }}</div>
                                        <div class="review-meta">{{ review.title }} · {{ review.date_published }}</div>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<script src="catalog/view/javascript/swiper-11/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.review-swiper', {
        slidesPerView: 1,
        loop: true,
        autoplay: {
            delay: 4000,
            disableOnInteraction: false
        },
        breakpoints: {
            768: { slidesPerView: 1 }, // 移动端依然是1个滑块（每个滑块3个评论，纵向排列）
            480: { slidesPerView: 1 }
        }
    });
</script>
